<template>
    <view class="template-business tn-safe-area-inset-bottom">
        <!-- 顶部自定义导航 -->
        <tn-nav-bar fixed alpha customBack>
            <view slot="back" class='tn-custom-nav-bar__back'
                  @click="goBack">
                <text class='icon tn-icon-left'></text>
                <text class='icon tn-icon-home-capsule-fill'></text>
            </view>
        </tn-nav-bar>
        <!-- 顶部 -->
        <view>
            <view class="king-list" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
                <view class="king-icon ">
                    <text class='tn-icon-clip tn-color-white tn-text-lg tn-bg-indigo tn-round tn-padding-xs'></text>
                    <text class='tn-text-xl tn-margin-left'>LED照明</text>
                </view>
                <view class='king-item tn-color-indigo tn-icon-science'>
                    <view class="resume2 tn-main-gradient-blue--light tn-shadow-blur" style="padding: 20rpx 20rpx;">
                        <text class="tn-margin-top-sm">
                            使用LED灯泡替代传统白炽灯，LED灯具有更高的能效和更长的寿命。
                        </text>
                    </view>
                </view>
                <view class="king-icon">
                    <text class='tn-icon-clip tn-color-white tn-text-lg tn-bg-indigo tn-round tn-padding-xs'></text>
                    <text class='tn-text-xl tn-margin-left'>关灯定时</text>
                </view>
                <view class='king-item tn-color-indigo tn-icon-science'>
                    <view class="resume2 tn-main-gradient-blue--light tn-shadow-blur" style="padding: 20rpx 20rpx;">
                        <text class="tn-margin-top-sm">
                            养成随手关灯的好习惯，同时可以使用定时器或智能插座设备，设定特定时间自动关闭灯光。
                        </text>
                    </view>
                </view>
                <view class='king-item tn-color-indigo tn-icon-science'>
                    <view class="resume2 tn-main-gradient-blue--light tn-shadow-blur" style="padding: 20rpx 20rpx;">
                        <text class="tn-margin-top-sm">
                            定期清理空调过滤器，保持空调的高效运转。在离开房间时记得关闭空调。
                        </text>
                    </view>
                </view>
                <view class="king-icon">
                    <text class='tn-icon-clip tn-color-white tn-text-lg tn-bg-indigo tn-round tn-padding-xs'></text>
                    <text class='tn-text-xl tn-margin-left'>使用能效电器</text>
                </view>
                <view class='king-item tn-color-indigo tn-icon-science'>
                    <view class="resume2 tn-main-gradient-blue--light tn-shadow-blur" style="padding: 20rpx 20rpx;">
                        <text class="tn-margin-top-sm">
                            选购带有能效标志的电器产品，如冰箱、洗衣机、空调等，能够降低用电成本。
                        </text>
                    </view>
                </view>
                <view class="king-icon">
                    <text class='tn-icon-clip tn-color-white tn-text-lg tn-bg-indigo tn-round tn-padding-xs'></text>
                    <text class='tn-text-xl tn-margin-left'>电器待机功耗</text>
                </view>
                <view class='king-item tn-color-indigo tn-icon-science'>
                    <view class="resume2 tn-main-gradient-blue--light tn-shadow-blur" style="padding: 20rpx 20rpx;">
                        <text class="tn-margin-top-sm">
                            不使用时及时拔掉电器设备的电源插头，以防止待机功耗。
                        </text>
                    </view>
                </view>
                <view class="king-icon">
                    <text class='tn-icon-clip tn-color-white tn-text-lg tn-bg-indigo tn-round tn-padding-xs'></text>
                    <text class='tn-text-xl tn-margin-left'>充电设备管理</text>
                </view>
                <view class='king-item tn-color-indigo tn-icon-science'>
                    <view class="resume2 tn-main-gradient-blue--light tn-shadow-blur" style="padding: 20rpx 20rpx;">
                        <text class="tn-margin-top-sm">
                            当充电器不使用时及时拔掉插头，避免充电器在插座上待机消耗电能。
                        </text>
                    </view>
                </view>
                <view class="king-icon">
                    <text class='tn-icon-clip tn-color-white tn-text-lg tn-bg-indigo tn-round tn-padding-xs'></text>
                    <text class='tn-text-xl tn-margin-left'>夏季遮阳</text>
                </view>
                <view class='king-item tn-color-indigo tn-icon-science'>
                    <view class="resume2 tn-main-gradient-blue--light tn-shadow-blur" style="padding: 20rpx 20rpx;">
                        <text class="tn-margin-top-sm">
                            利用窗帘、百叶窗等遮阳装置，降低室内温度，减轻空调负担。
                        </text>
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>

<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
export default {
    name: 'TemplateBusiness',
    mixins: [template_page_mixin],
    data(){
        return {
            tagList: [
                {
                    color: 'red',
                    title: "萌新求带",
                },
                {
                    color: 'cyan',
                    title: "简约美",
                },
                {
                    color: 'blue',
                    title: "开心吃货",
                },
                {
                    color: 'green',
                    title: "爱花草",
                },
                {
                    color: 'orange',
                    title: "产品经理",
                },
                {
                    color: 'purplered',
                    title: "手工王子",
                },
                {
                    color: 'purple',
                    title: "创意设计",
                },
                {
                    color: 'brown',
                    title: "腹黑",
                },
                {
                    color: 'yellowgreen',
                    title: "水果控",
                },
                {
                    color: 'lime',
                    title: "bug多多",
                },
                {
                    color: 'grey',
                    title: "蠢萌蠢萌",
                }
            ]
        }
    },
    methods: {

    }
}
</script>

<style lang="scss" scoped>

/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }

  &:before {
    content: " ";
    width: 1rpx;
    height: 110%;
    position: absolute;
    top: 22.5%;
    left: 0;
    right: 0;
    margin: auto;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    opacity: 0.7;
    background-color: #FFFFFF;
  }
}

/* 简历内容 */
.king-list {
  display: block;
  background-color: #ffffff;
}

.king-list .king-icon {
  width: 100%;
  text-align: left;
  padding: 20rpx 0 20rpx 37rpx;
  font-size: 26rpx;
  color: #888;
  display: block;
}

.king-list>.king-item {
  padding: 30rpx 30rpx 30rpx 120rpx;
  position: relative;
  display: block;
  z-index: 0;
}

.king-list>.king-item::after {
  content: "";
  display: block;
  position: absolute;
  width: 1rpx;
  background-color: #E6E6E6;
  left: 60rpx;
  height: 100%;
  top: 0;
  z-index: 8;
}

.king-list>.king-item::before {
  display: block;
  position: absolute;
  top: 36rpx;
  z-index: 9;
  background-color: #ffffff;
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  border: none;
  line-height: 50rpx;
  left: 36rpx;
}


/* 名片微调 */
.img-solid {
  border: 2rpx solid #eee;
}

.share-img {
  position: fixed;
  /* padding: 10rpx; */
  width: 100rpx;
  height: 100rpx;
  /* top: 680rpx; */
  bottom: 200rpx;
  right: 20rpx;
  z-index: 1024;
  opacity: 0.8;
  box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
  border: none;
  border: 6rpx solid rgba(255, 255, 255, 0);
}

.resume {
  display: flex;
  justify-content: space-between;
  padding-top: 10rpx;
  border-radius: 6rpx;
  color: #666;
  line-height: 1.6;
}

.resume+.resume {
  margin-top: 20rpx;
}

.resume2 {
  padding-top: 10rpx;
  border-radius: 6rpx;
  display: block;
  color: #666;
  line-height: 1.6;
  text-align: justify;
}

/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}
/* 间隔线 end*/


.bg-img-cont {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 350rpx;
  margin: 20rpx 0;
  border-radius: 8rpx;
}



// .button-no {
//   border: none;
//   width: 100%;
//   height: 100%;
//   background-color: rgba(0, 0, 0, 0);
// }


/* 标签内容 start*/
.tn-tag-content {
  &__item {
    display: inline-block;
    line-height: 45rpx;
    padding: 10rpx 30rpx;
    margin: 0rpx 20rpx 25rpx 0rpx;

    &--prefix {
      padding-right: 10rpx;
    }
  }
}
/* 标签内容 end*/

.see {
  display: flex;
  justify-content: space-between;
  padding-top: 10rpx;
  border-radius: 6rpx;
  color: #666;
  line-height: 1.6;
}
</style>
